<template>
  <div class="options-container">
    <el-input
      v-model="newValue"
      placeholder="请输入内容"
      @input="$emit('input', newValue)"
    ></el-input>
    <!-- <el-input  v-model="input" placeholder="请输入内容"></el-input> -->
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="upload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <span v-else class="avatar-uploader-icon">上传图片</span>
      <i class="el-icon-circle-close avatar-close-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: '',
      newValue: this.value
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    imgUrl: {
      type: String,
      default: ''
    }

  },
  watch: {
    value () {
      this.newValue = this.value
    }
  },
  methods: {
    upload (file) {
      console.log('上传图片' + file)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isPNG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }

}
</script>

<style scoped lang='less'>
.options-container {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-left: 4px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 100px;
  height: 60px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  color: #333;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar-close-icon {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 18px;
  color: #999;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
}
</style>
